<style scoped>
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
    width: 44%;
    display: inline-block;
    padding: 5px 3%;
    text-align: right;
  }
  .rj-cell span {
    font-size: 14px;
    color: #333;
    display: inline-block;
    width: 50%;
  }
  .rj-cell.note label{
    float: left;
  }
  .rj-cell.note span{
    width: 80%;
    display: inline-block;
  }
  .weui-cells {
    margin-top: 0;
  }
  .weui-cells_form {
    background: #fbfbfb;
  }
  .weui-cell {
    background: #fff;
  }
  .weui-cells__title {
    text-align: left;
  }
  .oitem {
    padding: 3px;
  }
  .hide {
    display: none;
  }
  #acts {
    font-size: 0;
  }
  #acts span {
    font-size: 14px;
  }
  .halfbtn {
    display: inline-block;
    width: 49%;
  }
  .weui-label {
    text-align: left;
  }

  .weui_uploader_input_wrp {
    float: left;
    position: relative;
    margin-right: 9px;
    margin-bottom: 9px;
    width: 77px;
    height: 77px;
    border: 1px solid #D9D9D9;
  }
  .weui_uploader_hd {
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
  }
  .weui_uploader_files {
    list-style: none;
  }
  .weui_uploader_input_wrp:before {
    width: 2px;
    height: 39.5px;
  }
  .weui_uploader_input_wrp:before, .weui_uploader_input_wrp:after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #D9D9D9;
  }
  .weui_uploader_input {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .weui_uploader_input_wrp:after {
    width: 39.5px;
    height: 2px;
  }
  .weui_uploader_bd {
    overflow: hidden;
  }
  .weui_cell {
    padding: 10px 15px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .outstore >>> .weui-uploader_files {
    list-style: none;
    overflow-y: hidden;
  }
  .outstore >>> .weui-uploader_file {
    float: left;
    margin-right: 9px;
    margin-bottom: 9px;
    width: 79px;
    background: no-repeat 50%;
    background-size: cover;
  }
  .weui-cell.fir {
    border-top: 0;
  }
  .weui_uploader_input_wrp.inrow {
    width: 30px;
    height: 30px;
    margin: 0;
  }
  .weui_uploader_input_wrp:before {
    height: 19.5px;
  }
  .weui_uploader_input_wrp:after {
    width: 19.5px;
  }
  .weui-uploader_file.inrow {
    margin: 0;
    width: 40px;
  }
</style>
<template>
  <div class="weiupload">
    <div class="weui_cell">
      <div class="weui_cell_bd weui_cell_primary">
        <div class="weui_uploader">
          <div class="weui_uploader_hd weui_cell" style="padding-left: 0;">
            <div class="weui_cell_bd weui_cell_primary" id="outstore">文件上传</div>
            <div class="weui_cell_ft" id=""></div>
          </div>
          <div class="weui_uploader_bd">
      <ul class="weui-uploader_files" id="images">
        <li class="weui-uploader_file" v-for="(img, index) in images1.serverId" :id="img"  @click=del(img,1) ><img :src="images1.srcStr[index]" width="85" /></li>
      </ul>
      <div class="weui_uploader_input_wrp">
        <input type="file" id="selectImage" @change="getFile($event)"  class="weui_uploader_input" >
      </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        images1: {
          serverId: [],
          srcStr: [],
        }
      }
    },
    props: [

    ],
    components: {
    },
    mounted() {
    },
    watch: {
      'orderid': function (val) {
        this.getOperatelogs();
      },
      'srguid': function (val) {
        this.getOperatelogs();
      },
      'departid': function (val) {
        this.getOperatelogs();
      },
    },
    methods: {
      getToken: async function() {
        await this.axios({
          method: 'get',
          url: `/seeyon/Seeyon!getToken.action`,
        }).then(response => {
          if (response.data.msg == 'success') {
            this.token = response.data.token;
          } else {
            //失败时不提示
          }
        });
      },
      getFile: async function(e) {
        console.log('e:', e)
        console.log('file:', e.target.files[0])
        await this.getToken();
        // var file = new FormData()
        // file.append('file', e.target.files[0]),
        //   console.log('file:', file)
        var fd = new FormData()
        fd.append('file', e.target.files[0])
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }

        this.axios.post(`/api/seeyon/rest/attachment?token=${this.token}`, fd,config).then( res => {
          console.log(res)
        }).catch( res => {
          console.log(res)
        })

        // this.axios({
        //   // headers: { "Content-Type": "multipart/form-data" },
        //   headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        //   method: 'post',
        //   url: `/api/rest/attachment?token=${this.token}`,
        //   file
        // }).then(response => {
        //
        //   if (response.data.msg == 'success') {
        //   } else {
        //     //失败时不提示
        //   }
        // });
      },
      getOperatelogs: function (id) {
        if (this.orderid == undefined || this.srguid == undefined || this.departid == undefined) return;
        this.axios({
          method: 'get',
          url: '/sales/Flowtempnode!getFlowNodes.action',
          params: {guid: this.orderid, srguid: this.srguid, departid: this.departid}
        }).then(response => {
          if (response.data.msg == 'success') {
            this.loading = false;

            let data = response.data;
            this.nodes = data.nodes;
            let pendNodes = this.nodes.filter(item => {
              return item.status == 2;
            })
            this.initNodesSelect(pendNodes);
            this.warnAppendRemark();
          } else {
            //this.toastText('获取审批记录失败');
          }
        });
      },
      showEdit: function(opers, status) {
        let operIds = opers.map(item => {
          return item.guid;
        });
        return operIds.indexOf(this.userid) > -1 && status == 1;
      },
      packIt: function(obj) {
        if (obj != '') {
          return JSON.parse(obj);
        } else {
          return [];
        }
      },
      editIt: function(id){
        let that = this;
        $.modal({
          title: "提示信息",
          text: this.nodesHtml,
          buttons: [
            { text: "确定", onClick: function(){
                if ($('#remark').val() == '') {
                  that.toastText('请输入信息内容！');
                  return false;
                }
                //防止重复提交
                $('.subbtn').attr("disabled",true).css("pointer-events","none");
        //显示提交状态
        $.showLoading("正在提交");

                let postData = {
                  toNodeid: $('#tonode').val(),
                  optlogid: id,
                  remark: $('#remark').val(),
                  operatorid: that.userid,
                  operator: that.username
                }
                that.axios({
                  method: 'post',
                  url: '/sales/Operationlogs!appendRemark.action',
                  params: postData
                }).then(response => {
                  //恢复提交按钮可点击
                  $('.subbtn').attr('disabled', false).css("pointer-events","auto");
          //关闭提交状态
          $.hideLoading();

                  if (response.data.msg == 'success') {
                    that.toastSuccess("保存成功");
                    $.closeModal();
                    location.reload();
                  } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
                    //不不设置提示
                  } else {
                    that.toastError('系统错误');
                  }
                }).catch(function (error) {
                  //恢复提交按钮可点击
                  $('.subbtn').attr('disabled', false).css("pointer-events","auto");
          //关闭提交状态
          $.hideLoading();
                  that.toastError('系统错误');
                });
              }},
            { text: "取消", className: "default"},
          ]
        });
      },
      packDate: function(date) {
        let reg = new RegExp(/(-| |:)/g);
        return date.replace(reg, '');
      },
      warnAppendRemark: function() {
        let that = this;
        let optlogid = '';
        let updateflag = false;
        this.nodes.some(item => {
          if (item.appendRemark != '') {
            let appendRemark = JSON.parse(item.appendRemark);

            let afterAppendRmrks = appendRemark.map((rm, i) => {
              if (rm.toNodeid == that.nodeid) {
                optlogid = item.optlogid;
                if (i == 0) {
                  if (rm.flag == 1) {
                    that.toastText3(rm.operator + '：' + rm.remark);
                    rm.flag = 2;
                    updateflag = true;
                  }
                } else {
                  if (rm.flag == 1) {
                    setTimeout(function () {
                      that.toastText3(rm.operator + '：' + rm.remark);
                    }, 3000)
                    rm.flag = 2;
                    updateflag = true;
                  }
                }
              }
              return rm;
            })
            //更新表中appendremarks
            if (optlogid != '' && updateflag) {
              that.UpdateAppendRmks(afterAppendRmrks, optlogid);
            }
          }
        })
      },
      UpdateAppendRmks: function (afterAppendRmrks, optlogid) {
        let postParams = {};
        afterAppendRmrks.filter((item,index) => {
          Object.keys(item).forEach(key => {
            postParams['appends['+ index +'].' + key] = item[key];
          })
        })

        postParams.optlogid = optlogid;
        this.axios({
          method: 'post',
          url: '/sales/Operationlogs!updateRemark.action',
          params: postParams
        }).then(response => {
          //成功与否不做提示
        });
      },
      initNodesSelect: function (arr) {
        let content = '<div class="cellgroup"> <div class="weui-cell weui-cell_select fir"> <div class="weui-cell__hd"><label class="weui-label">提醒对象</label></div> <div class="weui-cell__bd"> <select class="weui-select" name="" id="tonode"> <option value="" disabled>请选择</option>';
        for (let i=0; i<arr.length; i++) {
          content += '<option value="'+ arr[i].guid +'">'+ arr[i].name +'</option>';
        }
        content += '</select> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label class="weui-label">信息</label></div> <div class="weui-cell__bd"> <textarea id="remark" class="weui-textarea" name="" placeholder="请输信息内容" rows="2"></textarea> </div> </div> </div>';
        this.nodesHtml = content;
      },
      filterNull: function (obj) {
        return obj != null ? obj : {};
      },
      openLogs: function() {
        this.$router.push({name: 'OperationLogs2', query: {orderid: this.id, srguid: this.sellform.storermguid, departid: this.sellform.depguid}});
      }
    }
  }
</script>
